<template>
    <div>
        <img class="image" :src="data.image" />
        <div class="text">ASIN：{{data.asin}}</div>
        <div class="text">标题：{{data.title}}</div>
        <div class="text">价格：<span class="price">{{data.price}}</span></div>
        <div class="text">大类排名：
            <span class="rank">{{data.topRank.rank}}</span>
            <span>{{data.topRank.cat}}</span>
        </div>
        <div class="text">小类排名：
            <span class="rank">{{data.subRank.rank}}</span>
            <span>{{data.subRank.cat}}</span>
        </div>
        <div class="text">卖家ID：{{data.sellerId}}</div>
        <div class="text">店铺名：{{data.shop.name}}</div>
        <div class="text">
            店铺链接：
            <a class="text" target='_blank' style="display: inline" :href="data.shop.link">{{data.shop.link}}</a>
        </div>
        <div class="mt12 flex" >
            <a @click="viewAllVideos" class="flex1">
                <el-icon><video-play /></el-icon>
                查看视频
            </a>
            <a @click="viewReviews" class="flex1">
                <el-icon><comment /></el-icon>
                查看评论
            </a>
        </div>
        <el-drawer v-model="drawerVisible" :title="`${data.videoList.length} 个视频`" :width="20">
            <el-input placeholder="PDF文字说明" v-model="pdfText" />
            <div class="videoDrawerWrapper">
                <VideoBlock
                    v-for="item in data.videoList"
                    :key="item.videoUrl"
                    :src="item.videoUrl"
                    :videoUrlBase64="item.videoUrlBase64"
                    :thumbnailUrl="item.imageUrl"
                />
<!--                 
                <div v-for="item in data.videoList" :key="item.videoUrl" class="video-block">
                    <a :href="item.videoUrl" target="_blank" class="image-btn" :class="{'image-btn-hover': item.videoUrl === currentVideoUrl}">
                        <img class="videoImage" style="display: block;" :src="item.imageUrl" />
                    </a>
                    <el-dropdown placement="bottom-end" @mouseover="onQrOver(item)" @mouseout="onQrOut">
                        <span style="margin-left: 12px" class="svg-btn">
                            <svg t="1648211838558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="32" height="32"><path d="M262.4 262.4l115.2 0 0 115.2-115.2 0 0-115.2Z" p-id="2219"></path><path d="M262.4 646.4l115.2 0 0 115.2-115.2 0 0-115.2Z" p-id="2220"></path><path d="M646.4 262.4l115.2 0 0 115.2-115.2 0 0-115.2Z" p-id="2221"></path><path d="M806.4 806.4l-115.2 0 0 57.6 115.2 0c32 0 57.6-25.6 57.6-57.6l0-57.6-57.6 0L806.4 806.4z" p-id="2222"></path><path d="M160 217.6l0 262.4 320 0 0-320L217.6 160C185.6 160 160 185.6 160 217.6zM422.4 422.4 217.6 422.4 217.6 217.6l204.8 0L422.4 422.4z" p-id="2223"></path><path d="M160 806.4c0 32 25.6 57.6 57.6 57.6l262.4 0 0-320-320 0L160 806.4zM217.6 601.6l204.8 0 0 204.8L217.6 806.4 217.6 601.6z" p-id="2224"></path><path d="M544 544l204.8 0 0 57.6-204.8 0 0-57.6Z" p-id="2225"></path><path d="M691.2 627.2 627.2 627.2 627.2 691.2 691.2 691.2 691.2 748.8 748.8 748.8 748.8 691.2 864 691.2 864 627.2 748.8 627.2Z" p-id="2226"></path><path d="M544 748.8l57.6 0 0 115.2-57.6 0 0-115.2Z" p-id="2227"></path><path d="M627.2 748.8l57.6 0 0 57.6-57.6 0 0-57.6Z" p-id="2228"></path><path d="M544 627.2l57.6 0 0 57.6-57.6 0 0-57.6Z" p-id="2229"></path><path d="M806.4 544l57.6 0 0 57.6-57.6 0 0-57.6Z" p-id="2230"></path><path d="M806.4 160 544 160l0 320 320 0L864 217.6C864 185.6 838.4 160 806.4 160zM806.4 422.4 601.6 422.4 601.6 217.6l204.8 0L806.4 422.4z" p-id="2231"></path></svg>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="openImage(item)">下载二维码为图片</el-dropdown-item>
                                <el-dropdown-item @click="downloadPDF(item)">下载二维码为PDF</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
 -->

            </div>
            
        </el-drawer>

    </div>
</template>

<script lang="typescript">
    import {
        ElDrawer,
        ElIcon,
        ElInput,
        // ElDropdown,
        // ElDropdownMenu,
        // ElDropdownItem
    } from 'element-plus'
    import { VideoPlay, Comment } from '@element-plus/icons-vue'
    import VideoBlock from './VideoBlock.vue'
    // import './msyh-normal'
    export default {
        components: {
            ElDrawer,
            ElIcon,
            VideoPlay,
            Comment,
            ElInput,
            // ElDropdown,
            // ElDropdownMenu,
            // ElDropdownItem,
            VideoBlock
        },
        props: {
            data: {
                type: Object,
                default: () => ({
                    videoList: []
                })
            }
        },
        data() {
            return {
                drawerVisible: false,
                pdfText: '',
                currentVideoUrl: '',
            }
        },
        methods: {
            // downloadPDF({ videoUrlBase64 }) {
            //     const doc = new jsPDF()
            //     const timestamp = new Date().getTime()
            //     doc.setFontSize(40)
            //     doc.setFont('msyh')
            //     doc.text(this.pdfText, 10, 15)
            //     doc.addImage(videoUrlBase64, 'PNG', 10, 20, 150, 150)
            //     doc.save(`${timestamp}.pdf`)
            // },
            // openImage({ videoUrlBase64 }) {
            //     // const img = new Image()
            //     // img.src = videoUrlBase64
            //     // const win = window.open("", "_blank")
            //     // win.document.write(img.outerHTML)
            //     // win.document.close()
            //     const a = document.createElement('a')
            //     const event = new MouseEvent('click')
            //     const timestamp = new Date().getTime() + ''
            //     a.download = timestamp
            //     a.href = videoUrlBase64
            //     a.dispatchEvent(event)
            // },
            viewAllVideos() {
                this.drawerVisible = true
            },
            viewReviews() {
                const seeAllReviewEl = document.querySelector('#reviews-medley-footer > div.a-row.a-spacing-medium > a')
                const seeAllReviewLink = seeAllReviewEl.href
                console.log('seeAllReviewLink', seeAllReviewLink)
                window.open(seeAllReviewLink, "_blank")
            },
            // onQrOver(item) {
            //     this.currentVideoUrl = item.videoUrl
            // },
            // onQrOut() {
            //     this.currentVideoUrl = undefined
            // }
        }
    }
</script>

<style lang="scss" scoped>

</style>